<template>
  <div>
    <a-modal title="分类" :visible="visible" :confirm-loading="loading" ok-text="保存" @ok="ok()" @cancel="cancel">
      <div class="about-master-container">
        <a-form-model ref="form" :model="queryParam" :rules="rules">
          <a-row>
            <a-col span="24">
              <a-form-model-item label="分类" prop="name">
                <BaseInput v-model="queryParam.name" placeholder="请输入" />
              </a-form-model-item>
            </a-col>

            <a-col span="24">
              <a-form-model-item label="状态" prop="basicStatus">
                <a-select v-model="queryParam.basicStatus">
                  <a-select-option :value="0">可用</a-select-option>
                  <a-select-option :value="1">不可用</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col span="24">
              <a-form-model-item label="排序">
                <BaseInputNumber :min="0" isInt v-model="queryParam.sortNum" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
import api from '@/api/technical/constructionStage.js'

export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },

    form: Object
  },
  data() {
    return {
      loading: false,
      queryParam: { status: 0 },
      rules: {
        name: [{ required: true, message: '请输入分类', trigger: 'change' }],
        basicStatus: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.queryParam = this.$clone(this.form)
        })
      } else {
        this.queryParam = { status: 0 }
      }
    }
  },
  methods: {
    async ok() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let res
          let temp = this.$clone(this.queryParam)
          temp.type = 0
          temp.enabled = temp.enabled === 1
          if (this.queryParam.id) {
            res = await api.edit(temp)
          } else {
            res = await api.add(temp)
          }
          this.loading = false

          this.$noticeSuccess('成功')
          this.cancel()
          this.$emit('ok', temp)
        } else {
          this.$noticeWarning('请填写完整')
        }
      })
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped></style>
